import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
    Table,
    Icon,
    Divider,
    Form,
    Select,
    DatePicker,
    Input,
    Card,
    Tag,
    Avatar,
    Checkbox,
    Rate,
    Progress,
    Button,
    Spin,
    Row,
    Col,
    Modal,
    Collapse,
    List,
    Radio,
    Badge,
} from 'antd';

import DescriptionList from '../../components/DescriptionList';
import { solo } from '../../common/solo';
import styles from './AntiFraudVerify.less';

const Option = Select.Option;
const Panel = Collapse.Panel;
const FormItem = Form.Item;
const { Description } = DescriptionList;

const customPanelStyle = {
    background: '#ECECEC',
    borderRadius: 4,
    marginBottom: 8,
    border: 0,
    overflow: 'hidden',
};
const stateArray = ["否", "是"];
// @connect(({ apply }) => ({
//   apply,
// }))
@Form.create()
export default class AntiFraudVerify extends PureComponent {
    state = {
        prodectId: '',
        customerId: '',
        name: '',
        idCard: '',
        mobile: '',
        historyByDay: 'd_7',
        historicalDate: {},
        queryHistoryDetails: null,
        queryHistory: false,
        antiFraudVerifyVisible: null,
        fraudDetails: null,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        // const { item } = this.props;
        // // console.log("AntiFraudVerify   this.propr.item", item)
        // this.setState({
        //   antiFraudVerifyVisible: this.props.antiFraudVerifyVisible,
        //   fraudDetails: item,
        // })
        // // if (this.props.antiFraudVerifyVisible) {
        // dispatch({
        //   type: 'apply/opposeCheat',
        //   payload: {
        //     projectId: item.projectId,
        //     customerId: item.customerId,
        //     name: item.customerName,
        //     idCard: item.customerIdCard,
        //     mobile: item.customerPhone,
        //   },
        // });
        // }
    }

    handleChange = (value, data) => {
        this.setState({
            historyByDay: value,
        });
        switch (value) {
            case 'd_7':
                this.setState({
                    queryHistoryDetails: data.d_7
                })
                break;
            case 'd_15':
                this.setState({
                    queryHistoryDetails: data.d_15
                })
                break;
            case 'd_30':
                this.setState({
                    queryHistoryDetails: data.d_30
                })
                break;
            case 'd_60':
                this.setState({
                    queryHistoryDetails: data.d_60
                })
                break;
            case 'd_90':
                this.setState({
                    queryHistoryDetails: data.d_90
                })
                break;
            case 'm_4':
                this.setState({
                    queryHistoryDetails: data.m_4
                })
                break;
            case 'm_5':
                this.setState({
                    queryHistoryDetails: data.m_5
                })
                break;
            case 'm_6':
                this.setState({
                    queryHistoryDetails: data.m_6
                })
                break;
            case 'm_9':
                this.setState({
                    queryHistoryDetails: data.m_9
                })
                break;
            case 'm_12':
                this.setState({
                    queryHistoryDetails: data.m_12
                })
                break;
            case 'm_18':
                this.setState({
                    queryHistoryDetails: data.m_18
                })
                break;
            case 'm_24':
                this.setState({
                    queryHistoryDetails: data.m_24
                })
                break;
        }
    };

    handleInitializeDate = (data) => {
        if (!this.state.queryHistory && data) {
            this.setState({
                queryHistoryDetails: data.d_7,
                queryHistory: true
            })
        }
    }

    renderSimpleFormDiv_7(data) {
        return (
            this.handleInitializeDate(data),
            <Form>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem>
                            <Select
                                style={{ width: 300 }}
                                placeholder="请选择"
                                value={this.state.historyByDay}
                                onChange={(value) => this.handleChange(value, data)}
                            >
                                <Option value="d_7">7天</Option>
                                <Option value="d_15">15天</Option>
                                <Option value="d_30">30天</Option>
                                <Option value="d_60">60天</Option>
                                <Option value="d_90">90天</Option>
                                <Option value="m_4">120天</Option>
                                <Option value="m_5">150天</Option>
                                <Option value="m_6">180天</Option>
                                <Option value="m_9">270天</Option>
                                <Option value="m_12">360天</Option>
                                <Option value="m_18">540天</Option>
                                <Option value="m_24">720天</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        );
    }

    columnsKey_1 = [
        {
            title: '序号',
            dataIndex: 'number',
            key: 'number',
            align: 'center',
            render: (text, recode, index) => {
                return index + 1
            }
        }, {
            title: '类别名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        }, {
            title: '次数',
            dataIndex: 'num',
            key: 'num',
            align: 'center'
        },
    ];

    columnsKey_2 = [
        {
            title: '序号',
            dataIndex: 'number',
            key: 'number',
            align: 'center'
        }, {
            title: '类别名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        }, {
            title: '次数',
            dataIndex: 'num',
            key: 'num',
            align: 'center'
        },
    ];

    columnsKey_3 = [
        {
            title: '使用过此手机的其他姓名',
            dataIndex: 'susp_name',
            key: 'susp_name',
            align: 'center',
            width: '50%'
        }, {
            title: '最后使用时间',
            dataIndex: 'susp_updt',
            key: 'susp_updt',
            align: 'center',
            width: '50%'
        }
    ];

    columnsKey_4 = [
        {
            title: '使用过此手机的其他身份证',
            dataIndex: 'susp_idcard',
            key: 'susp_idcard',
            align: 'center',
            width: '50%'
        }, {
            title: '最后使用时间',
            dataIndex: 'susp_updt',
            key: 'susp_updt',
            align: 'center',
            width: '50%'
        }
    ];

    columnsKey_5 = [
        {
            title: '提供数据的机构类型',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: '50%'
        }, {
            title: '最后使用时间',
            dataIndex: 'userTime',
            key: 'userTime',
            align: 'center',
            width: '50%'
        }
    ];

    columnsKey_6 = [
        {
            title: '使用过此身份证的其他姓名',
            dataIndex: 'susp_name',
            key: 'susp_name',
            align: 'center',
            width: '50%'
        }, {
            title: '最后使用时间',
            dataIndex: 'susp_updt',
            key: 'susp_updt',
            align: 'center',
            width: '50%'
        }
    ];

    columnsKey_7 = [
        {
            title: '使用过次身份证的其他手机',
            dataIndex: 'susp_phone',
            key: 'susp_phone',
            align: 'center',
            width: '30%'
        }, {
            title: '最后使用时间',
            dataIndex: 'susp_updt',
            key: 'susp_updt',
            align: 'center',
            width: '30%'
        }, {
            title: '运营名称',
            dataIndex: 'susp_phone_operator',
            key: 'susp_phone_operator',
            align: 'center',
            width: '20%'
        }, {
            title: '归属地',
            dataIndex: 'susp_phone_province',
            key: 'susp_phone_province',
            align: 'center',
            width: '20%'
        }
    ];

    columnsKey_8 = [
        {
            title: '提供数据的机构类型',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: '50%'
        }, {
            title: '最后使用时间',
            dataIndex: 'userTime',
            key: 'userTime',
            align: 'center',
            width: '50%'
        }
    ];

    columnsKey_9 = [
        {
            title: '查询日期',
            dataIndex: 'searched_date',
            key: 'searched_date',
            align: 'center',
            width: '30%'
        }, {
            title: '机构类型',
            dataIndex: 'searched_org',
            key: 'searched_org',
            align: 'center',

        }, {
            title: '是否是本机构查询',
            dataIndex: 'org_self',
            key: 'org_self',
            align: 'center',
            width: '25%',
            render: text =>
                text === true ? (<Tag color="#45b97c">是</Tag>
                ) : (<Tag color="#a1a3a6">否</Tag>)
        }
    ];

    columnsKey_10 = [
        {
            title: '是否有信用卡',
            dataIndex: 'if_own_cc',
            key: 'if_own_cc',
            align: 'center',
        }, {
            title: '是否有白金卡',
            dataIndex: 'if_own_wg_cc',
            key: 'if_own_wg_cc',
            align: 'center',
        }, {
            title: '是否有车',
            dataIndex: 'if_own_car',
            key: 'if_own_car',
            align: 'center',
        }, {
            title: '是否购买保险产品',
            dataIndex: 'if_pay_ins',
            key: 'if_pay_ins',
            align: 'center',
        }
        , {
            title: '是否购买理财产品',
            dataIndex: 'if_fin_buy_pre6',
            key: 'if_fin_buy_pre6',
            align: 'center',
        }
        , {
            title: '消费能力指数',
            dataIndex: 'cst_score_finally',
            key: 'cst_score_finally',
            align: 'center',
        }
    ];

    columnsKey_11 = [
        {
            title: '注册APP统计',
            children: [{
                title: 'APP类型',
                dataIndex: 'label',
                key: 'label',
                align: 'center',
            }, {
                title: '注册数量',
                dataIndex: 'count',
                key: 'count',
                align: 'center',

            },],
        }
    ];

    columnsKey_12 = [
        {
            title: '黑名单详细信息',
            children: [{
                title: '最大逾期天数',
                dataIndex: 'maxDay',
                key: 'maxDay',
                align: 'center',

            }, {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
                align: 'center',

            }, {
                title: '累计已还金额',
                dataIndex: 'repaidMoney',
                key: 'repaidMoney',
                align: 'center',

            }, {
                title: '累计借入本金',
                dataIndex: 'borrowMoney',
                key: 'borrowMoney',
                align: 'center',
            }],
        }
    ];

    handleTimestampToTime = (timestamp) => {
        if (!timestamp) {
            return;
        }
        const dates = new Date(Number(timestamp));
        const year = 1900 + dates.getYear();
        const month = "0" + (dates.getMonth() + 1);
        const date = "0" + dates.getDate();
        const hour = "0" + dates.getHours();
        const minute = "0" + dates.getMinutes();
        const second = "0" + dates.getSeconds();
        return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
            + " " + hour.substring(hour.length - 2, hour.length) + ":"
            + minute.substring(minute.length - 2, minute.length) + ":" + second.substring(second.length - 2, second.length);
    }

    render() {

        const identityDetails = this.props.thirdDataDetails;
        const opposeCheatList = identityDetails.opposeCheat;
        const id = this.props.id;
        return (

            <div >
                {/* 111{JSON.stringify(opposeCheatList.user_searched_history_by_day)}222 */}
                <Card
                    title="身份认证"
                    extra={<a href={`${solo.AntiFraudVerifyDownload}${id}`}><Button type='danger'>报告下载</Button></a>}>
                    {identityDetails.authentication &&
                        <div>
                            <DescriptionList col={1} style={{ marginBottom: '20px', fontSize: '20px' }}>
                                <Description >{identityDetails.authentication.name}</Description>
                            </DescriptionList>
                            <DescriptionList col={3} >
                                <Description term="身份证号">{identityDetails.authentication.idCard}</Description>
                                <Description term="手机号">{identityDetails.authentication.mobile}</Description>
                                <Description term="出生日期">{identityDetails.authentication.birthday}</Description>
                                <Description term="性别">{identityDetails.authentication.sex}</Description>
                                <Description term="查询时间">{identityDetails.authentication.createTime}</Description>
                            </DescriptionList>
                            <DescriptionList col={1} style={{ marginTop: '20px', marginBottom: '30px' }}>
                                <Description term="查询结果">
                                    {identityDetails.authentication.code == 1 ? <Row style={{ fontSize: '20px', color: 'green' }}>一致</Row> :
                                        <div>{identityDetails.authentication.code == 0 ? <Row style={{ fontSize: '20px', color: 'red' }}>不一致</Row> :
                                            <Row style={{ fontSize: '20px', color: '#0099ff' }}>查询失败</Row>}</div>
                                    }
                                </Description>
                            </DescriptionList>
                        </div>
                    }
                </Card>
                {!opposeCheatList ? <div style={{ textAlign: 'center', marginTop: '30px' }}>暂无数据</div> :
                    <div>
                        {opposeCheatList.appealList &&
                            <Card title="涉诉情况">
                                <Table
                                    pagination={false}
                                    columns={this.columnsKey_1}
                                    dataSource={opposeCheatList.appealList}
                                    size="middle"
                                    bordered />
                            </Card>}
                        {opposeCheatList.sociality &&
                            <Card title="社交特征">
                                <Card type="inner" title="基本社交特征">
                                    <Form layout="inline">
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="灰度分"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        <Tag color="#ef4136">
                                                            {opposeCheatList.sociality.grayScore}
                                                        </Tag>(总分100,10分以下为高危人群)
                                        </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="社会活跃度"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{opposeCheatList.sociality.socialLiveness}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="社交影响力"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{opposeCheatList.sociality.socialInfluence}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="是否种子号"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        {opposeCheatList.sociality.hasReport == true ?
                                                            <Tag color="#45b97c">是</Tag>
                                                            : <Tag color="#a1a3a6">否</Tag>}
                                                        (是否成功产生过蜂蜜报告)</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="最近活跃时间"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        {
                                                            this.handleTimestampToTime(opposeCheatList.sociality.recentactivetime)
                                                        }
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="被标记的黑名单分类"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        {opposeCheatList.sociality && opposeCheatList.sociality.blacklistcategory == "" ? '' :
                                                            <Tag color="#ef4136">{opposeCheatList.sociality.blacklistcategory}</Tag>}
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="姓名和手机是否在黑名单"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        {opposeCheatList.sociality.blacklist_name_with_phone == true ?
                                                            <Tag color="#45b97c">是</Tag> : <Tag color="#a1a3a6">否</Tag>}
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="姓名和手机黑名单更新时间"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{opposeCheatList.sociality.blacklist_update_time_name_phone}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="身份证和姓名是否在黑名单"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">
                                                        {opposeCheatList.sociality.blacklist_name_with_idcard == true ?
                                                            <Tag color="#45b97c">是</Tag> : <Tag color="#a1a3a6">否</Tag>}
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={12} sm={24}><FormItem label="身份证和姓名黑名单信息更新时间"></FormItem></Col>
                                            <Col md={12} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{opposeCheatList.sociality.blacklist_update_time_name_idcard}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    </Form>
                                    <Table
                                        pagination={false}
                                        columns={this.columnsKey_12}
                                        dataSource={opposeCheatList.blackDetailsList}
                                        size="middle"
                                        bordered />
                                </Card>
                            </Card>}

                        <Card title="手机存疑">
                            <Table
                                pagination={false}
                                columns={this.columnsKey_3}
                                dataSource={opposeCheatList.userIphoneList}
                                size="middle" />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_4}
                                dataSource={opposeCheatList.userIdCardList}
                                size="middle" />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_5}
                                dataSource={opposeCheatList.iphoneInstitutionList}
                                size="middle" />
                        </Card>

                        <Card title="身份存疑">
                            <Table
                                pagination={false}
                                columns={this.columnsKey_6}
                                dataSource={opposeCheatList.idCradMsgList}
                                size="middle" />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_7}
                                dataSource={opposeCheatList.userIdcradIphoneList}
                                size="middle" />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_8}
                                dataSource={opposeCheatList.identityInstitutionList}
                                size="middle" />
                        </Card>


                        <Card title="机构历史查询">
                            <Form layout="inline">
                                <FormItem label="查询机构数">
                                    <span className="ant-form-text">
                                        (历史查询机构统计-已去重)
                                    </span>
                                </FormItem>
                            </Form><Divider />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_9}
                                size="middle" />
                        </Card>

                        <Card title="查询历史">
                            <div className={styles.tableListForm}>
                                {opposeCheatList.user_searched_history_by_day && this.renderSimpleFormDiv_7(opposeCheatList.user_searched_history_by_day)}
                            </div>
                            {this.state.queryHistoryDetails &&
                                <Card type="inner" title="历史查询">
                                    <Form layout="inline">
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={8} sm={24}>
                                                <FormItem label="查询次数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt}</span>
                                                </FormItem>
                                            </Col>
                                            <Col md={8} sm={24}>
                                                <FormItem label="查询机构数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_cash}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={8} sm={24}>
                                                <FormItem label="现金贷查询次数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_cc}</span>
                                                </FormItem>
                                            </Col>
                                            <Col md={8} sm={24}>
                                                <FormItem label="现金贷查询机构数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_cf}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={8} sm={24}>
                                                <FormItem label="消费分期查询次数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_org}</span>
                                                </FormItem>
                                            </Col>
                                            <Col md={8} sm={24}>
                                                <FormItem label="消费分期查询机构数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_org_cash}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={8} sm={24}>
                                                <FormItem label="信用卡代还查询次数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_org_cc}</span>
                                                </FormItem>
                                            </Col>
                                            <Col md={8} sm={24}>
                                                <FormItem label="信用卡代还查询机构数">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{this.state.queryHistoryDetails.cnt_org_cf}</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Divider />
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询次数在总体查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem style={{ textAlign: 'right' }}>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_all) * 100).toFixed(2)}%
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询机构数在总体查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_cash) * 100).toFixed(2)}%
                                                    </span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询次数在现金贷查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_cc) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询机构数在现金贷查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_cf) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询次数在消费分期查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_org_all) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询机构数在消费分期查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_org_cash) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询次数在信用卡代还查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_org_cc) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                            <Col md={18} sm={24}>
                                                <FormItem label="查询机构数在信用卡代还查询分布中的百分位">
                                                </FormItem>
                                            </Col>
                                            <Col md={4} sm={24}>
                                                <FormItem>
                                                    <span className="ant-form-text">{
                                                        Number((this.state.queryHistoryDetails.pct_cnt_org_cf) * 100).toFixed(2)}%</span>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    </Form>
                                </Card>
                            }
                        </Card>

                        <Card title="注册信息">
                            <Form layout="inline">
                                <FormItem label="注册APP数量">
                                    <span className="ant-form-text">
                                        <Tag color="#FFB90F">{opposeCheatList.user_register_orgs && opposeCheatList.user_register_orgs.register_cnt}</Tag>
                                    </span>
                                </FormItem>
                            </Form><Divider />
                            <Table
                                pagination={false}
                                columns={this.columnsKey_11}
                                dataSource={opposeCheatList.user_register_orgs && opposeCheatList.user_register_orgs.register_orgs_statistics}
                                size="middle"
                                bordered />
                        </Card>
                        {opposeCheatList.consumer_label &&
                            <Card title="消费标签信息">
                                <Form layout="inline">
                                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                        <Col md={8} sm={24}>
                                            <FormItem label="是否有信用卡">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.if_own_wg_cc == 1 ?
                                                        <Tag color="#45b97c">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_cc]}
                                                        </Tag>
                                                        :
                                                        <Tag color="#a1a3a6">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_cc]}
                                                        </Tag>
                                                    }
                                                </span>
                                            </FormItem>
                                        </Col>
                                        <Col md={8} sm={24}>
                                            <FormItem label="是否有白金卡">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.if_own_wg_cc == 1 ?
                                                        <Tag color="#45b97c">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_wg_cc]}
                                                        </Tag>
                                                        :
                                                        <Tag color="#a1a3a6">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_wg_cc]}
                                                        </Tag>}
                                                </span>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                        <Col md={8} sm={24}>
                                            <FormItem label="是否有车">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.if_own_wg_cc == 1 ?
                                                        <Tag color="#45b97c">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_car]}
                                                        </Tag>
                                                        :
                                                        <Tag color="#a1a3a6">
                                                            {stateArray[opposeCheatList.consumer_label.if_own_car]}
                                                        </Tag>}
                                                </span>
                                            </FormItem>
                                        </Col>
                                        <Col md={8} sm={24}>
                                            <FormItem label="是否购买保险产品">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.if_own_wg_cc == 1 ?
                                                        <Tag color="#45b97c">
                                                            {stateArray[opposeCheatList.consumer_label.if_pay_ins]}
                                                        </Tag>
                                                        :
                                                        <Tag color="#a1a3a6">
                                                            {stateArray[opposeCheatList.consumer_label.if_pay_ins]}
                                                        </Tag>}
                                                </span>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                                        <Col md={8} sm={24}>
                                            <FormItem label="是否购买理财产品">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.if_own_wg_cc == 1 ?
                                                        <Tag color="#45b97c">
                                                            {stateArray[opposeCheatList.consumer_label.if_fin_buy_pre6]}
                                                        </Tag>
                                                        :
                                                        <Tag color="#a1a3a6">
                                                            {stateArray[opposeCheatList.consumer_label.if_fin_buy_pre6]}
                                                        </Tag>}
                                                </span>
                                            </FormItem>
                                        </Col>
                                        <Col md={8} sm={24}>
                                            <FormItem label="消费能力指数">
                                            </FormItem>
                                        </Col>
                                        <Col md={4} sm={24}>
                                            <FormItem>
                                                <span className="ant-form-text">
                                                    {opposeCheatList.consumer_label.cst_score_finally}
                                                </span>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                            </Card>}
                    </div>
                }
            </div>

        );
    }
}